<template>
  <div>
    <div v-if="pageBool" class="pass_box">
      <el-image :src="require('@/assets/public/pass.png')" />
      <div class="position">
        <div class="pass_title">成长管理</div>
        <div class="pass_desc">成长助手</div>
        <el-button size="medium" type="primary" @click="open">
          {{ isOpen ? '进入' : '立即开通使用' }}
        </el-button>
        <el-button size="medium" @click="$emit('send')">返回</el-button>
      </div>
    </div>
    <Growth-manag v-else @send="$emit('send')" />

    <el-dialog title="开通" :visible.sync="dialog">
      <div class="box">
        <div class="flex_y_center">
          <div class="title_txt">
            <span>*</span>
            appId：
          </div>
          <el-input
            v-model="openForm.mcs_code"
            placeholder="请输入appId"
            style="width: 35%"
          />
        </div>
        <div class="flex_y_center">
          <div class="title_txt">
            <span>*</span>
            小程序名称：
          </div>
          <el-input
            v-model="openForm.growth_name"
            placeholder="请输入小程序名称"
            style="width: 35%"
          />
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="pass">开通</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { openGrowthApp } from '@/api/punch'
  import GrowthManag from './components/growthmanag.vue'

  export default {
    components: {
      GrowthManag,
    },
    props: {
      isOpen: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        pageBool: true,

        dialog: false,
        openForm: {
          mcs_code: '', // appid
          growth_name: '', // 小程序名称
        },
        hint: {
          mcs_code: 'appid',
          growth_name: '小程序名称',
        },
      }
    },
    methods: {
      open() {
        if (this.isOpen) this.pageBool = false
        else this.dialog = true
      },
      // 开通
      pass() {
        for (let item in this.hint) {
          if (this.openForm[item] == '') {
            this.$message.error(this.hint[item] + '未填写')
            return
          }
        }
        openGrowthApp(this.openForm).then((res) => {
          console.log(res)
          this.$message.success('开通成功')
          this.dialog = false // 关闭对话框
          this.pageBool = false // 切换页面
        })
      },
    },
  }
</script>

<style scoped>
  span {
    color: red;
  }
  .pass_box {
    position: relative;
  }
  .position {
    position: absolute;
    left: 140px;
    top: 50%;
    transform: translate(0, -50%);
  }
  .pass_title {
    font-size: 34px;
    color: #000;
  }
  .pass_desc {
    font-size: 20px;
    margin: 15px 0 30px;
  }

  .box > div {
    margin-bottom: 10px;
  }
  .title_txt {
    width: 35%;
    text-align: right;
  }
</style>
